<template>
	<view>
		<view class="content_item" v-for="(item, index) in dataList" :key="index" @click="navigate_to_details(item)">
			<!-- 图片 -->
			<view class="image_box">
				<image :src="item.image[0]" mode="aspectFill"></image>
			</view>

			<!-- 信息盒子 -->
			<view class="infos_box">
				<!-- 文字内容 -->
				<view class="text_box">
					<!-- 标题 -->
					<view>
						<!-- 如果是丢失了证件卡类 -->
						<!-- 捡到的是校园卡或身份证 -->
						<text class="title main-font-color font-weight-bold"
							v-if="item.tags == 'lost' && (item.type == '校园卡' || item.type == '身份证')">捡到了{{item.student_name}}的{{item.type}}</text>
						<!-- 捡到的是银行卡 -->
						<text class="title main-font-color font-weight-bold"
							v-else-if="item.tags == 'lost' && item.type == '银行卡'">捡到了尾号为{{utils.substring(item.bank_card_No, 15)}}的{{item.bank_card_name}}卡</text>
						<!-- 捡到的是电影卡 -->
						<text class="title main-font-color font-weight-bold"
							v-else-if="item.tags == 'lost' && item.type == '电影卡'">捡到了尾号为{{utils.substring(item.movie_card_No, 8)}}的{{item.type}}</text>
						<!-- 捡到的是其它物品 -->
						<text class="title main-font-color font-weight-bold" v-else-if="item.tags == 'lost' && item.type == '其它'">捡到了{{item.item_name}}</text>
						<text class="title main-font-color font-weight-bold" v-else-if="item.tags == 'found' && item.type == '其它'">弄丢了{{item.item_name}}</text>
						
					</view>
					<view class="detail_info">
						<view class="user_info">
							<!-- 头像 -->
							<view class="avatar">
								<image :src="item.avatarUrl" mode="aspectFill"></image>
							</view>
							<!-- 昵称 -->
							<text class="nickname small-font-color .small-font-size">{{item.nickname}}</text>
						</view>
						<!-- 发布时间 -->
						<text
							class="post_time  small-font-color .small-font-size">{{utils.timesFun(item.post_time)}}</text>
					</view>
				</view>

			</view>

		</view>
	</view>
</template>

<script module="utils" src="@/wxcomponents/wxs/utils.wxs" lang="wxs"></script>
<script>
	export default {
		name: "indexListItem",
		props: {
			// 首页数据
			dataList: {
				type: Array,
				default: []
			}
		},
		data() {
			return {

			};
		},
		methods:{
			navigate_to_details(item){
				uni.navigateTo({
					url:`/subpkg/detailsPage/details/details?_id=${item._id}`
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content_item {
		margin-top: 30rpx;
	}

	// 图片
	.image_box {
		width: 200rpx;
		height: 200rpx;
		border-radius: 20rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}

	// 信息盒子
	.infos_box {
		margin-top: -164rpx;
		box-sizing: border-box;
		width: 640rpx;
		height: 164rpx;
		background-color: white;
		border-radius: 20rpx;
		box-shadow: 0 0 8px #b8b8b8;
		overflow: hidden;
		padding: 12rpx 0;

		.text_box {
			height: 100%;
			width: 400rpx;
			margin-left: 220rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-size: 36rpx;
				line-height: 40rpx;
				width: 400rpx;
				// 限制行高为2，超过就用...代替
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}

			.detail_info {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.user_info {
					display: flex;
					justify-content: center;
					align-items: center;

					.avatar {
						width: 52rpx;
						height: 52rpx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}
				}
			}
		}
	}
</style>
